<template>
    <div class="bigimage">
        <!-- 文本区域 -->
      <div class="main">
        <!-- 上传头像  -->
         <div class="box">
          <div class="author">
            <van-image 
              round
              width="5rem"
              height="5rem"
             :src="user.avatar" fit="cover" />
         </div>
         <van-button round type="default" plain class="btn" @click="exit()">退出登录</van-button>
        </div>
        <!-- 介绍区域 -->
        <div class="intro">
          <ul class="intro-one clearfix">
            <li class="nickname">{{user.uname}}</li></br>
            <li>
              <span class="lv-wrap">Lv.{{user.lv}}</span>
            </li>
          </ul>
          <ul class="intro-two  clearfix">
            <li><span>99</span>关注</li>
            <li><span>99</span>粉丝</li>
            <li><span>99</span>来访</li>
          </ul>
          <span class="my-collec">{{user.qianming || qms}} </span>
        </div>
        <!-- 图片区域 -->
        <van-grid  :column-num="4" class="grid" :border="false" :square="true">
           <van-grid-item v-for="(item,index) in iconNames" :key="index" @click="order(item.id)">
             <van-icon class="icons" :name="item.name"/>
            <span class="icons-font" >{{item.content}}</span>
           </van-grid-item>
        </van-grid>
        <div class="middle">
            <van-image 
              round
              width="5rem"
              height="5rem"
              src="/image/me1.jpg" fit="cover" />
           <div>别划啦，到底了！</div>
        </div>
      </div>
    

    </div>
</template>

<script>
import { Toast } from 'vant';
import session from '../http/session'
export default {
  name: "WorkspaceJsonMe",

  data() {
    return {
      iconNames: [
        { id: 0, name: "orders-o", content: "我的订单" },
        { id: 1, name: "point-gift-o", content: "福利中心" },
        { id: 2, name: "star-o", content: "我的收藏" },
        { id: 3, name: "bulb-o", content: "我的游记" },
        { id: 4, name: "edit", content: "创作中心" },
        { id: 5, name: "records", content: "我的点评" },
        { id: 6, name: "flag-o", content: "我的历史" },
        { id: 7, name: "paid", content: "卡券红包" },
        { id: 8, name: "wap-home-o", content: "小蜂客栈" },
        { id: 9, name: "aim", content: "我的蜂蜜" },
        { id: 10, name: "underway-o", content: "我的圈子" },
        { id: 11, name: "newspaper-o", content: "旅行装备" },
        { id: 12, name: "point-gift-o", content: "我的活动" },
        { id: 13, name: "gift-card-o", content: "新人有礼" },
        { id: 14, name: "newspaper-o", content: "营业执照" },
      ],
      user:[],
      qms:'这个人很懒，什么也没写'
    };
  },

  mounted() {

  },
  created() {
    session().then(res=>{
      console.log(res);
      if(res.data.code==200){
        this.user = res.data.data[0]
      }
    })
  },
  methods: {
    order(id){
      if(id==0){
        this.$router.push('/myorder')
      }else if(id==1){
        this.$router.push('/myyhq')
      }else{
        Toast('敬请期待');
      }
    },
    exit(){
      sessionStorage.removeItem("cookie-session");
      this.$router.replace("/login");
    }
  },
};
</script>

<style lang="scss" scoped>
.bigimage {
  width: 100%;
  height: 1000px;
  background: url("../assets/myinfo-back.jpg") no-repeat;
  position: relative;
  overflow-y: auto;
  .main {
    padding: 10px 0 200px 0;
    width: 100%;
    border: 1px solid white;
    background-color: white;
    position: absolute;
    top: 230px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    box-sizing: border-box;
    padding-left: 5px;
    padding-right: 5px;
    .box {
      margin-bottom: 84px;
      //头像
      .author {
        position: absolute;
        top: -30px;
        left: 20px;
      }
      //按钮
      .btn {
        float: right;
        top: 3px;
      }
    }
    .intro {
      width: 100%;
      list-style: none;
      font-size: 14px;
      margin-bottom: 10px;
      padding-left: 5px;
      .intro-one {
        height: 30px;
        line-height: 30px;
        li {
          float: left;
          margin-right:20px ;
        }
      }
      .intro-two {
        margin-bottom: 20px;
        height: 30px;
        line-height: 30px;
        li {
          margin-right:20px ;
          color: #999;
          float: left;
          span {
            font-weight: bolder;
            color: black;
          }
        }
      }
      .router {
        color: #999;
        text-decoration: none;
      }
    }
    .grid {
      span {
        padding-top: 15px;
        color: #999;
        font-size: 10px;
      }
    }
    .middle {
      margin-top: 5px;
      text-align: center;
      font-size: 20px;
    }
  }
}
.nickname {
  font-size: 25px;
  margin-top: -10px;
  font-weight: bold;
}
.lv-wrap{
  font-size: 16px;
  font-weight: bold;
  color: rgb(248, 185, 10);
}
.my-collec{
  font-size: 16px;
}
.icons{
  color: rgb(255, 136, 0);
  font-size: 28px;
}
.icons-font{
  font-size: 14px!important;
}
</style>